import QtQuick 1.1
import com.nokia.meego 1.0
import com.juhanapaavola.qmlcomponents 1.0

Page {  

    property variant imageList: []
    property int maxPageIndex: 0
    property alias startPage: frontImage.source

    state: screen.orientationString

    states: [
        State {
            name: "Landscape"
            onCompleted: {
                backImage.rotation = 270
            }
        },
        State {
            name: "Portrait"
            onCompleted: {
                backImage.rotation = 0
            }
        }
    ]


    Component.onCompleted: {        
        readerFlipable.pageIndex = 0
        readerFlipable.direction = pageDirection.nothing
        readerFlipable.flipped = false        
    }

    QtObject{
        id: pageDirection
        property int nothing: 0
        property int pageForward: 1
        property int pageBackward: -1
        property int pageFastForward: 5
        property int pageFastBackward: -5
    }

    Flipable {
        id: readerFlipable
        anchors.fill: parent

        property bool flipped: false        
        property variant pageIndex: 0
        property int direction: 0

        front: Flickable{
            id: readerFrontFlickable
            anchors.fill: parent

            width: parent.width
            height: parent.height

            contentHeight: frontImageItem.height
            contentWidth: frontImageItem.width

            onHeightChanged: frontImage.calcSize()

            PinchArea{
                id: pinchArea
                property real minScale: 1.0
                anchors.fill: parent
                property real lastScale: 1.0
                pinch.target: frontImage
                pinch.minimumScale: minScale
                pinch.maximumScale: 3.0

                onPinchFinished: readerFrontFlickable.returnToBounds()
            }

            Item{
                id: frontImageItem
                width: Math.max(frontImage.width*frontImage.scale, readerFrontFlickable.width)
                height: Math.max(frontImage.height*frontImage.scale, readerFrontFlickable.height)

                Image {
                    id: frontImage
                    source: "qrc:/images/flip_screen.png"
                    anchors.centerIn: parent
                    property real prevScale
                    property real origScale: scale
                    property real origPrevScale
                    //sourceSize.width: frontImage.width
                    //sourceSize.height: frontImage.height
                    fillMode: Image.PreserveAspectFit
                    width: frontImage.sourceSize.width
                    height: frontImage.sourceSize.height
                    smooth: true


                    function calcSize(){
                        scale = Math.min(readerFrontFlickable.width/width, readerFrontFlickable.height/height)*0.98;
                        pinchArea.minScale = scale;
                        prevScale = Math.min(scale,1);
                        origPrevScale = prevScale
                    }

                    function resetToOriginal(){
                        scale = frontImage.origScale
                        frontImage.calcSize()

                        if((width*scale)>readerFrontFlickable.width){
                            var xoff = (readerFrontFlickable.width/2+readerFrontFlickable.contentX)*scale/frontImage.origPrevScale
                            readerFrontFlickable.contentX=xoff-readerFrontFlickable.width/2
                        }
                        if((height*scale)>readerFrontFlickable.height){
                            var yoff = (readerFrontFlickable.height/2+readerFrontFlickable.contentY)*scale/frontImage.origPrevScale
                            readerFrontFlickable.contentY=yoff-readerFrontFlickable.height/2
                        }
                        frontImage.prevScale=scale;
                    }

                    MouseArea{
                        anchors.fill: parent
                        onDoubleClicked: {
                            frontImage.resetToOriginal()
                        }
                    }

                    onStatusChanged: {
                        if(status == Image.Ready){
                            calcSize();
                        }
                    }

                    onScaleChanged: {
                        if((width*scale)>readerFrontFlickable.width){
                            var xoff = (readerFrontFlickable.width/2+readerFrontFlickable.contentX)*scale/prevScale
                            readerFrontFlickable.contentX=xoff-readerFrontFlickable.width/2
                        }
                        if((height*scale)>readerFrontFlickable.height){
                            var yoff = (readerFrontFlickable.height/2+readerFrontFlickable.contentY)*scale/prevScale
                            readerFrontFlickable.contentY=yoff-readerFrontFlickable.height/2
                        }
                        prevScale=scale;
                    }
                }
            }
        }

        back: Image{
            id: backImage
            source: "qrc:/images/flip_screen.png"
            anchors.centerIn: parent
        }

        transform: Rotation{
            id: rotation
            origin.x: readerFlipable.width/2
            origin.y: readerFlipable.height/2
            axis.x:0
            axis.y:1
            axis.z:0
            angle:0

            Behavior on angle {
                NumberAnimation{
                    target: rotation; property: "angle"; duration: 1000
                    onRunningChanged: {
                        if(!running && readerFlipable.flipped){
                            frontImage.source = imageList[readerFlipable.pageIndex].pageUrl
                            frontImage.resetToOriginal();
                            readerFlipable.flipped = !readerFlipable.flipped
                        }                        
                    }
                }
            }
        }

        states:
            State{
            name: "back"
            when: readerFlipable.flipped
            PropertyChanges { target: rotation; angle: 180 }
            }

    }

    Rectangle{
        anchors.left: parent.left
        anchors.top: parent.top

        width: leftImage.width
        height: leftImage.height

        color: "transparent"

        Image {
            id: leftImage
            anchors.left: parent.left
            anchors.top: parent.top
            source: "qrc:/icons/arrow_left_64x64.png"
        }
        MouseArea{
            id: mouseAreaLeft
            anchors.fill: parent

            onClicked: {
                if(readerFlipable.pageIndex>0){
                    readerFlipable.direction = pageDirection.pageBackward;
                    readerFlipable.pageIndex = readerFlipable.pageIndex+pageDirection.pageBackward
                    readerFlipable.flipped = !readerFlipable.flipped
                }
            }
        }
    }

    Rectangle{
        anchors.right: parent.right
        anchors.top: parent.top

        width: rightImage.width
        height: rightImage.height

        color: "transparent"

        Image {
            id: rightImage
            anchors.right: parent.right
            anchors.top: parent.top
            source: "qrc:/icons/arrow_right_64x64.png"
        }
        MouseArea{
            id: mouseAreaRight
            anchors.fill: parent

            onClicked: {
                if(readerFlipable.pageIndex < maxPageIndex){
                    readerFlipable.direction = pageDirection.pageForward;
                    readerFlipable.pageIndex = readerFlipable.pageIndex+pageDirection.pageForward
                    readerFlipable.flipped = !readerFlipable.flipped
                }
            }
        }
    }


    Rectangle{
        anchors.left: parent.left
        anchors.bottom: parent.bottom

        width: leftFastImage.width
        height: leftFastImage.height

        color: "transparent"

        Image {
            id: leftFastImage
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            source: "qrc:/icons/arrow_double_left_64x64.png"
        }
        MouseArea{
            id: mouseAreaLeftFast
            anchors.fill: parent

            onClicked: {
                if(readerFlipable.pageIndex+pageDirection.pageFastBackward>0){
                    readerFlipable.direction = pageDirection.pageFastBackward;
                    readerFlipable.pageIndex = readerFlipable.pageIndex+pageDirection.pageFastBackward
                    readerFlipable.flipped = !readerFlipable.flipped
                }else if(readerFlipable.pageIndex != 0){
                    readerFlipable.direction = pageDirection.pageFastBackward;
                    readerFlipable.pageIndex = 0
                    readerFlipable.flipped = !readerFlipable.flipped
                }
            }
        }
    }

    Rectangle{
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        width: rightFastImage.width
        height: rightFastImage.height

        color: "transparent"

        Image {
            id: rightFastImage
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            source: "qrc:/icons/arrow_double_right_64x64.png"
        }
        MouseArea{
            id: mouseAreaRightFast
            anchors.fill: parent

            onClicked: {
                if(readerFlipable.pageIndex+pageDirection.pageFastForward < maxPageIndex){
                    readerFlipable.direction = pageDirection.pageFastForward;
                    readerFlipable.pageIndex = readerFlipable.pageIndex+pageDirection.pageFastForward
                    readerFlipable.flipped = !readerFlipable.flipped
                }else if(readerFlipable.pageIndex != maxPageIndex){
                    readerFlipable.direction = pageDirection.pageFastForward;
                    readerFlipable.pageIndex = maxPageIndex
                    readerFlipable.flipped = !readerFlipable.flipped
                }
            }
        }
    }

    Rectangle{
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.leftMargin: parent.width/2-returnImage.width/2

        width: returnImage.width
        height: returnImage.height

        color: "transparent"

        Column{
            Image{
                id: returnImage
                source: "qrc:/icons/arrow_left_64x64.png"
                rotation: 90

                MouseArea{
                    id: returnMouseArea
                    anchors.fill: returnImage

                    onClicked: {
                        readerFlipable.pageIndex = 0
                        readerFlipable.direction = pageDirection.nothing
                        readerFlipable.flipped = false
                        frontImage.source = "qrc:/images/flip_screen.png"
                        maxPageIndex = 0

                        pageStack.pop();
                    }
                }
            }

            Text{
                id: pageIndexText
                text: qsTr("Page "+readerFlipable.pageIndex+" / "+maxPageIndex);
                font.pointSize: 14
                font.bold: true
                color: "white"
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
    }
}

